import * as d3 from 'd3'

// let data = [
//     {x:10,y:10},
//     {x:40,y:20},
//     {x:50,y:30},
//     {x:70,y:40},
//     {x:90,y:50}
// ];

// d3.select('#demo')
//   .append('svg')
//   .attr('width','100px')
//   .attr('height','100px')
//   .selectAll("circle")
//   .data(data)
//   .enter().append("circle")
//     .attr("cx", function(d) { return d.x; })
//     .attr("cy", function(d) { return d.y; })
//     .attr("r", 12.5);
// let svg = d3.select('#demo')
//     .append('svg')
//     .attr('width','100%')
//     .attr('height','100%')


//正圆形
// svg.append('circle')
//     .attr('cx',100)
//     .attr('cy',80)
//     .attr('r',50)
//     .attr('stroke','black')
//     .attr('stroke-width',2)
//     .attr('fill','red');
//矩形
// svg.append('rect')
//     .attr('x',30)
//     .attr('y',30)
//     .attr('width',100)
//     .attr("height",40)
//     .attr('stroke-width',10)
//     .attr('stroke','blue')
//     .attr('fill-opacity',0.8)
//     .attr('fill','#f40')
//     .attr('stroke-opacity',.8)
//     .attr('rx',30)
//     .attr("ry",30)
//直线
// svg.append('line')
//     .attr('x1',30)
//     .attr('x2',100)
//     .attr('y1',30)
//     .attr('y2',60)
//     .attr('stroke-width',5)
//     .attr('stroke','blue')
//多边形
// svg.append('polygon')
//     .attr('points','30,30,30,100,100,50,100,30,50,50')
//     .attr('stroke','red')
//类似线，有闭合fill，stroke？？
// svg.append('polyline')
//     .attr('points','0,0 0,20 20,20 20,40 40,40 40,60')
//     .attr('stroke','red')
//     .attr('fill','white')
//     .attr('stroke-width',2)
//path
// svg.append('path')
//     .attr('d',`M153 334
// C153 334 151 334 151 334
// C151 339 153 344 156 344
// C164 344 171 339 171 334
// C171 322 164 314 156 314
// C142 314 131 322 131 334
// C131 350 142 364 156 364
// C175 364 191 350 191 334
// C191 311 175 294 156 294
// C131 294 111 311 111 334
// C111 361 131 384 156 384
// C186 384 211 361 211 334
// C211 300 186 274 156 274`)
//     .attr('stroke','red')
//     .attr('fill','#fff')

//  // 用于坐标轴的线性比例尺
// let xScale = d3.scaleLinear()
//     .domain([0,10]) // 定义显示在比例尺上面的刻度
//     .range([0,300]);// 定义比例尺实际的显示宽度（像素）
//
//  // 定义坐标轴
// var axis = d3.axisBottom(xScale);
//
// // 在svg中添加一个包含坐标轴各元素的g元素
// var gAxis = svg.append('g')
//     .attr('transform','translate(80,80)');// 坐标原点平移到（80, 80）的位置
//
// // 绘制坐标轴
// gAxis.call(axis);

// let datas = [10,20,30,10,50];
//
// datas = [{x:100,y:200},{x:15,y:205}]
//
// let svg = d3.select('#demo').append('svg').attr("width",'100%').attr('height','100%')
//
// let circle = svg.selectAll('circle').data(datas);
//
// update(circle);
// setTimeout(()=>{
//     update(svg.selectAll('circle').data( [{x:200,y:300},{x:105,y:205},{x:40,y:50}]))
// },1000);
// setTimeout(()=>{
//     update(svg.selectAll('circle').data( [{x:100,y:300},{x:10,y:20}]))
// },2000);
//
// function update(circle){
//     //enter
//     circle.enter().append('circle')
//         .merge(circle)
//         .attr('cx',d=>d.x)
//         .attr('cy',d=>d.y)
//         .attr('r',0)
//         .transition()
//         .attr('r',100.5);
//
//     //exit
//     circle.exit().transition().attr("r", 0).remove();
// }

// let x = d3.scaleLinear()
//             .domain([0,50,100])//定义域
//             .range([0,100,200])//值域
// console.log(x(10),x(20),x(60),x(100),x(200))

// let datas = [30.5,20.879,60,30,200,50,100,150];
//
// //接收domain 之间的数据, 映射为range之间的数据位置
// let extent = d3.extent(datas);
// let scale = d3.scaleLinear()
//             .domain(extent)//[d3.min(datas),d3.max(datas)]
//             .range([0,100]);
//             // .range(['#000','#fff'])
// scale.nice();
// datas.forEach(d=>{
//     console.log(scale(d))
// })

/**
    scalePow这个比例次使用y = m * x^k + b这个数学函数来表达domain和range之间的数学函数关系。指数k使用.exponent()来设定
**/
// let powerScale = d3.scalePow()
//                     .exponent(0.5)
//                     .domain([0,100])
//                     .range([0,100])
// console.log(powerScale(10))

// let svg = d3.select('#demo').append('svg').attr('width','100%').attr('height','100%');

// svg.selectAll('g')
//     .data([11,22,33,44,55])
//     .enter()
//     .append('rect')
//     .attr('width',30)
//     .attr('height',d=>d)
//     .attr('fill','red')
//     .attr('x',(d,i)=>i*40)
//     // .attr('y',(d,i)=>{
//     //     console.log(d)
//     //     return d;
//     // })
//     .style('stroke',function(d,i){
//         console.log(d,i,this)
//         if((i+1)%2 == 0){
//             return 'black'
//         }else{
//             return 'yellow'
//         }
//     })
//     .style('stroke-width',10)
//     .text('aa')
//
// d3.select('body').selectAll('input')
//     .data(['aa','bb','cc','dd'])
//     .enter()
//     .append('input')
//     .property('type','checkbox')
//     .property('checked',(d,i)=>{
//         console.log(d,i)
//         if((i+1)%2 == 0){
//             return true;
//         }else{
//             return false;
//         }
//     })
//     .style('width',30)
//     .style('height',30)
//     .style('background','red')

//text html 示例
// d3.select('body').selectAll('p')
//     .data([1111,2222,33333,44444,5555])
//     .enter()
//     .append('p')
//     .html(d=>`<b>${d}</b>`)
//     .text(d=>d+'--->')
// d3.select('body').selectAll('p')
//     .data(['aa','bb','cc'])
//     .enter()
//     // .append('p')
//     // .text((d,i)=>`-:${i},-${d}--`)
//     // .insert('p',':first-child')
//     .insert('p',function(d,i){
//         // console.log(this,d,i)
//         console.log(d3.select('#demo').node())
//         return d3.select('#demo').node()
//     })
//     .text((d,i)=>`-index:${i},-${d}--`)

// let update = d3.select('#demo').selectAll('p')
//     .data(()=>{
//         return ['a','b','c','d','e']
//     },function(d,i){
//         console.log(d,i);
//         return i+10;
//     });
// console.log(update)
// update.enter()
//     .append('p')
//     .text((d,i)=>{
//         console.log(d,i)
//         return d;
//     });

//重排序
// let arr = [
//     {id:2,title:'bb',sort:1},
//     {id:1,title:'aa',sort:2},
//     {id:3,title:'cc',sort:3}
// ]
// let p = d3.select('#demo').selectAll('p')
//     .data(arr,(d,i)=>{
//         console.log('index',d,i)
//         return d.id;
//     })
//     .enter()
//         .append('p');
// p
//     .sort(function(a,b){
//         // console.log(a,b)
//         return a.id-0>b.id-0
//     })
//     .text((d,i)=>{
//         console.log('SHOW',d,i);
//         return d.title;
//     })
//
// setTimeout(()=>{
//     p.sort(function(a,b){
//         return a.sort-0>b.sort-0
//     })
//     .classed('update',true)
// },3000);

//数据更新示例
// var dataset = [10, 20, 30,40,50,60];
// d(dataset);
// setTimeout(()=>{
//     d([11111,22222,33333]);
//     setTimeout(()=>{
//         d(['aaaa','bbbb']);
//         setTimeout(()=>{
//             d(['AA','BB','CC']);
//         },3000);
//     },3000);
// },3000);
// function d(data){
//     let update = d3.select('#demo')
//         .selectAll('div')
//         .data(data);
//
//     update.enter()
//         .append('div')
//         .merge(update)
//         .transition()
//         // .classed('new', true)
//         .text(d=>d+'________');
//
//     // update.text(d=>d+'___')
//         // .classed('new', false);
//
//     update.exit().remove();
// }

//动画
// let data = [10,20,30];
// let animations = ['easeLinear', 'easePolyIn', 'easePolyOut', 'easePolyInOut', 'easeQuad', 'easeQuadIn', 'easeQuadOut',
//         'easeQuadInOut', 'easeCubic', 'easeCubicIn', 'easeCubicOut', 'easeCubicInOut', 'easeSin', 'easeSinIn', 'easeSinOut', 'easeSinInOut',
//         'easeExp', 'easeExpIn', 'easeExpOut', 'easeExpInOut', 'easeCircle', 'easeCircleIn', 'easeCircleOut', 'easeCircleInOut', 'easeElastic',
//         'easeElasticIn', 'easeElasticOut', 'easeElasticInOut', 'easeBack', 'easeBackIn', 'easeBackOut', 'easeBackInOut',
//         'easeBounce', 'easeBounceIn', 'easeBounceOut', 'easeBounceInOut'];
// f(data,0);
// let i = 0;
// cb();
// function cb(){
//     setTimeout(()=>{
//         i++;
//         data = [];
//         let len = 10;//parseInt(Math.random()*8+3)
//         for(var j=0;j<len;j++){
//             data[j] = parseInt(Math.random()*90+10);
//         }
//         f(data,i);
//         if(i<animations.length-1){
//             cb();
//         };
//         console.log(i,animations[i])
//     },1000);
// }
// function f(data,i){
//     let update = d3.select('#demo').selectAll('div').data(data);
//
//     let enter = update.enter().append('div').merge(update)
//         .transition()
//         // .delay((d,i)=>(i+1)*100)
//         // .duration((d,i)=>(i+1)*d*3+300)
//         .duration(1000)
//         .ease(d3[animations[i]])
//         .text(d=>d).style('width',d=>`${d}%`)
//
//     let exit = update.exit().remove();
//
//     d3.select('#demo').selectAll('div').on('click',function(d,i){
//         console.log(d,i,this)
//     },true)
// }

// let data = [10,20,30];
// let svg = d3.select('#demo').append('svg').append('g');
// let update = svg.selectAll('rect').data(data);
//
// let enter = update.enter().append('rect')
//                 .transition()
//                 .duration(1000)
//                 .attr('fill','red')
//                 .attr('x',(d,i)=>i*50)
//                 .attr('width',30)
//                 .attr('height',d=>d)
//                 .attr("y",100)
//
// let scaleLinear = d3.scaleLinear()
//         .domain([0,30])
//         .range([0,100])
// // 定义坐标轴
// var axis = d3.axisRight(scaleLinear).ticks(5)
// // 在svg中添加一个包含坐标轴各元素的g元素
// var gAxis = svg.append('g')
//    .attr('transform','translate(0,100)');// 坐标原点平移到（80, 80）的位置
//
// // 绘制坐标轴
// gAxis.call(axis);

// let data = [10,20,30,15,5];
//
// let svg = d3.select('#demo').append('svg').attr('width','100%').attr('height','100%');
//
// console.log(d3.min(data),d3.max(data));
//
// let scale = d3.scaleSequential()
//                 .domain(data)
//                 .interpolator(d3.interpolateRainbow)
//
// console.log(scale(20))


var myData = [0, 5, 7, 10, 20, 30, 35, 40, 60, 62, 65, 70, 80, 90, 100];

var linearScale = d3.scaleLinear()
    .domain([0, 100])
    .range([0, 600]);

var quantileScale = d3.scaleQuantile()
    .domain(myData)
    .range(['lightblue', 'orange', 'lightgreen']);

d3.select('#demo').append('svg')
    .selectAll('circle')
    .data(myData)
    .enter()
    .append('circle')
    .attr('r', 10)
    .attr('cy',100)
    .attr('cx', function(d) {
        return linearScale(d);
    })
    .style('fill', function(d) {
        return quantileScale(d);
    });

// // svg.append('g')
// let scale = d3.scaleLinear()
//     .domain([d3.min(data),d3.max(data)])
//     .range([0,document.documentElement.clientWidth]);
//
// console.log(scale(30))
// let update = svg.append('g').attr('width','100%').selectAll('rect').data(data);
// update.enter().append('rect').transition().attr('width',d=>`${d}%`).attr('height',d=>`${d}%`).attr('fill','rgba(100,0,0,0.3)').attr('x',(d,i)=>(i+1)*scale(d)).attr('y',d=>-d/2+50)
